<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="MyselfCenter.css"/>
		<link rel="stylesheet" type="text/css" href="Onitsuka_2.css"/>
		<link rel="stylesheet" type="text/css" href="download/font_1963390_hdoz6qydc2g/iconfont.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<p class="header-p">全场任意消费可享免费配送服务</p>
		</div>
		<!-- 导航 -->
		<div class="nav">
			<div class="nav-count">
				<a href="Onitsuka.html"><img src="img/logo.png" class="nav-logo"></a>
				<ul class="nav-ul">
					<li class="nav-li" id="navLi1"><a href="newClothes.html" id="navA1">新品</a></li>
					<li class="nav-li" id="navLi2"><a href="" id="navA2">系列</a></li>
					<li class="nav-li" id="navLi3"><a href="" id="navA3">男子</a></li>
					<li class="nav-li" id="navLi4"><a href="" id="navA4">女子</a></li>
					<li class="nav-li" id="navLi5"><a href="" id="navA5">儿童</a></li>
				</ul>
				<input type="text" id="nav-inp" placeholder="立即搜索" /><span class="iconfont iconsousuo"></span>
				<ul class="nav-icon">
					<li class="nav-iconLi"><a href=""><span class="nav-iconSp">HLEP</span>客服中心</a></li>
					<li class="nav-iconLi"><a href=""><span class="iconfont iconnav_icon_location"></span>店铺导航</a></li>
					<li class="nav-iconLi"><a href="MyselfCenter.html"><span class="iconfont iconrenwu"></span>个人中心</a></li>
					<li class="nav-iconLi" id="navLi6"><a href=""><span class="iconfont iconshoppingCart-full"></span>购物车</a></li>
				</ul>
			</div>
		</div>
		<!-- 中心区域 -->
		<div class="center">
			<img src="img/mc01.png" class="center-img">
			<div class="center-box">
				<h3>登录您的鬼塚虎账号</h3>
				<span class="center-boxSp1">验证码登录</span>
				<span class="center-boxSp2">密码登录</span>
				<div id="centerBox1">
					<input type="text" id="centerInp1" placeholder="请输入您的手机号"/><span id="centerSp1"></span>
					<input type="text" id="centerInp2" placeholder="请输入图形验证码"/><span class="center-boxSp3" onclick="randomCode()"></span><span id="centerSp2"></span>
					<input type="text" id="centerInp3" placeholder="请输入手机验证码"/><span class="center-boxSp4">发送验证码</span><span id="centerSp3"></span>
					<input type="checkbox" id="centerInp4"/><span class="center-boxSp5">记住我的状态</span>
					<input type="button" class="centerA1" value="忘记密码">
					<button type="button" id="centerBtn1">登录</button>
					<p class="centerP1">没有账号,<span class="centerA2">立即注册</span></p>
				</div>
				<div class="centerFloor1">
					<p class="centerP2">使用第三方平台登录</p>
					<img src="img/xtb.png" class="centerImg">
				</div>
				<div id="centerBox2">
					<input type="text" id="centerBox2Inp1" placeholder="请输入您的手机号"/><span id="centerBox2Sp1"></span>
					<input type="password" id="centerBox2Inp2" placeholder="请输入您的账户密码"/><span id="centerBox2Sp2"></span>
				    <input type="checkbox" id="centerBox2Inp3"/><span id="centerBox2Sp3">记住我的状态</span>
				    <input type="button" class="centerBox2A1" value="忘记密码">
				    <button type="button" id="centerBox2Btn1">登录</button>
				    <p class="centerBox2P1">没有账号,<span class="centerBox2A2">立即注册</span></p>
				</div>
				<div class="centerFloor2">
					<p class="centerFloor2P">使用第三方平台登录</p>
					<img src="img/xtb.png" class="centerFloor2Img">
				</div>
			</div>
		</div>
		<!-- 点击忘记密码的中心区域 -->
		<div class="fgCenter">
			<img src="img/mc01.png" class="fgCenter-img">
			<div class="fgCenter-box">
				<h3>重置您的密码</h3>
				<input type="text" id="fgCenterBoxInp1" placeholder="*请输入您的手机号" /><span id="fgCenterBoxSp1"></span>
				<input type="text" id="fgCenterBoxInp2" placeholder="*请输入图形验证码" /><span id="fgCenterBoxSp2" onclick="randomCode()"></span><span id="fgCenterBoxSp2a"></span>
				<input type="text" id="fgCenterBoxInp3" placeholder="*请输入手机验证码" /><span id="fgCenterBoxSp3">发送验证码</span><span id="fgCenterBoxSp3a"></span>
				<input type="password" id="fgCenterBoxInp4" placeholder="*请输入您的新密码" /><span id="fgCenterBoxSp4"></span>
				<input type="password" id="fgCenterBoxInp5" placeholder="*请再次输入您的新密码" /><span id="fgCenterBoxSp5"></span>
				<input type="button" id="fgCenterBoxInp6" value="重设密码"/>
			</div>
		</div>
		<!-- 点击立即注册跳转  register:注册-->
		<div class="register">
			<img src="img/mc01.png" class="register-img">
			<div class="register-box">
				<h3>创建您的个人账户，获取更多专属咨询</h3>
				<p class="register-boxP1">*为必填项</p>
				<input type="text" id="registerBoxInp1" placeholder="*姓名"/>
				<select id="registerBoxSel">
					<option>先生</option>
					<option>女士</option>
				</select>
				<span id="registerBoxSp1"></span>
				<input type="text" id="registerBoxInp2" placeholder="*请输入您的手机号"/><span id="registerBoxSp2"></span>
				<input type="text" id="registerBoxInp3" placeholder="*请输入图形验证码"/><span id="registerBoxSp3" onclick="randomCode()"></span><span id="registerBoxSp3a"></span>
				<input type="text" id="registerBoxInp4" placeholder="*请输入手机验证码"/><span id="registerBoxSp4">发送验证码</span><span id="registerBoxSp4a"></span>
				<input type="password" id="registerBoxInp5" placeholder="*请输入您的密码"/><span id="registerBoxSp5">
				<input type="password" id="registerBoxInp6" placeholder="*请确认您的密码"/><span id="registerBoxSp6">
				<div id="registerBoxInp7">
					<img src="img/rili.png">
					<span id="registerBoxSp7">请选择您的生日</span>
					<span id="registerBoxSp7a">×</span>
				</div>
				<input type="checkbox" id="registerBoxInp8"/><span id="registerBoxSp8">我已仔细阅读并同意 鬼塚虎 <a href="">隐私政策</a></span>
				<input type="button" id="registerBoxInp9" value="注册" />
				<p class="register-boxP2">已有账号,&nbsp;&nbsp;<a href="MyselfCenter.html">立即登录</a></p>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="footer-box1">
				<h3>网站支持</h3>
				<a href="" class="footer-A1">尺码对照表</a>
				<a href="" class="footer-A1">店铺定位器</a>
			</div>
			<div class="footer-box2">
				<h3>客户服务</h3>
				<a href="" class="footer-A2">关于订单</a>
				<a href="" class="footer-A2">练习我们</a>
			</div>
			<div class="footer-box3">
				<h3>关于鬼塚虎</h3>
				<a href="" class="footer-A3">隐私政策&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">关于ONITSUKA TIGER</a>
				<a href="" class="footer-A3">Cookie政策&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">联系方式与咨询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="" class="footer-A3">使用条款和条件</a>
			</div>
			<div class="footer-box4">
				<h3>关注鬼塚虎</h3>
				<a href="" class="footer-A4">官方微博<img src="img/wblogo.png"></a>
				<p class="footer-P1">官方微信</p>
				<img src="img/wx-logo.59012a31.jpg" class="footer-erweima">
				<p class="footer-P2">关注鬼塚虎官方微信</p>
			</div>
		</div>
		<div class="footer-count">
			<p class="footer-countP1">© 2020 ASICS China Corporation</p>
			<p class="footer-countP2">ESTABLISHED IN KOBE, JAPAN, 1949 </p>
			<img src="OnitsukaSY/tiger.03f9c5f4.png">
			<p class="footer-countP3">BY MR KIHACHIRO ONITSUKA</p>
			<p class="footer-countP4">中国大陆&nbsp;<a href="">CHANGE LOCATION</a></p>
		</div>
		<!-- 红色条 -->
		<div class="footer-red">
		
		</div>
		<!-- 最底部 -->
		<div class="footer-floor">
			<p class="footer-floorP">ONITSUKA TIGER IS A REGISTERED TRADEMARK OF ASICS CORPORATION</p>
			<a href="" class="footer-floorA">沪ICP备10203942号-2&nbsp;</a>
			<a href=""><img src="OnitsukaSY/ia_100000033.jpeg" class="footer-floorImg"></a>
		</div>
		<!-- 购物车的滑入显示框 -->
		<div id="box6">
			<p class="box6-p1">您的购物车为空</p>
			<p class="box6-p2">请<a href="MyselfCenter.html">登录</a>账户查看您的购物车</p>
			<span class="box6-sp" id="box6sp">×</span>
		</div>
		 <!-- 二级菜单 -->
		<div id="box1">
			<a href="" class="box1-a" id="box1a1"><img src="OnitsukaSY/ia_100000000.jpg" class="box1-img"><p class="box1p1">最新鞋款</p></a>
			<a href="" class="box1-a" id="box1a2"><img src="OnitsukaSY/ia_100000001.jpg" class="box1-img"><p class="box1p2">HMR PEAK LO <br> HMR PEAK G-<br>TX</p></a>
			<a href="" class="box1-a" id="box1a3"><img src="OnitsukaSY/ia_100000002.jpg" class="box1-img"><p class="box1p3">AUTUMN <br> WINTER 2020</p></a>
			<a href="" class="box1-a" id="box1a4"><img src="OnitsukaSY/ia_100000003.jpg" class="box1-img"><p class="box1p4">DELEGATION <br> EX</p></a>
			<a href="" class="box1-a" id="box1a5"><img src="OnitsukaSY/ia_100000004.png" class="box1-img"><p class="box1p5">李宇春同款</p></a>
		</div>
		<div id="box2">
			<a href="" class="box2-a" id="box2a1"><img src="OnitsukaSY/ia_100000005.png" class="box2-img"><p class="box2p1">CONTEMPOPAR</p></a>
			<a href="" class="box2-a" id="box2a2"><img src="OnitsukaSY/ia_100000006.jpg" class="box2-img"><p class="box2p2">HERITAGE</p></a>
			<a href="" class="box2-a" id="box2a3"><img src="OnitsukaSY/ia_100000007.jpg" class="box2-img"><p class="box2p3">服饰</p></a>
		</div>
		<div id="box3">
			<a href="" class="box3-a" id="box3a1"><img src="OnitsukaSY/ia_100000008.jpg" class="box3-img"><p class="box3p1">鞋履</p></a>
			<a href="" class="box3-a" id="box3a2"><img src="OnitsukaSY/ia_100000009.jpg" class="box3-img"><p class="box3p2">服装</p></a>
			<a href="" class="box3-a" id="box3a3"><img src="OnitsukaSY/ia_100000010.jpg" class="box3-img"><p class="box3p3">配件</p></a>
		</div>
		<div id="box4">
			<a href="" class="box4-a" id="box4a1"><img src="OnitsukaSY/ia_100000011.jpg" class="box4-img"><p class="box4p1">鞋履</p></a>
			<a href="" class="box4-a" id="box4a2"><img src="OnitsukaSY/ia_100000012.jpg" class="box4-img"><p class="box4p2">服装</p></a>
			<a href="" class="box4-a" id="box4a3"><img src="OnitsukaSY/ia_100000013.jpg" class="box4-img"><p class="box4p3">配件</p></a>
		</div>
		<div id="box5">
			<a href="" class="box5-a" id="box5a1"><img src="OnitsukaSY/ia_100000014.jpg" class="box5-img"><p class="box5p1">鞋履</p></a>
			<a href="" class="box5-a" id="box5a2"><img src="OnitsukaSY/ia_100000015.jpg" class="box5-img"><p class="box5p2">服配</p></a>			
		</div>
	</body>
</html>
<script src="YZMLogin.js"></script>
<script>
	var oNavLi1 = document.querySelector("#navLi1");
	var oNavLi2 = document.querySelector("#navLi2");
	var oNavLi3 = document.querySelector("#navLi3");
	var oNavLi4 = document.querySelector("#navLi4");
	var oNavLi5 = document.querySelector("#navLi5");
	var oNavLi6 = document.querySelector("#navLi6");
	
	var oBox1 = document.querySelector("#box1");
	var oBox2 = document.querySelector("#box2");
	var oBox3 = document.querySelector("#box3");
	var oBox4 = document.querySelector("#box4");
	var oBox5 = document.querySelector("#box5");
	var oBox6 = document.querySelector("#box6");
	
	var oBox1a1 = document.querySelector("#box1a1");
	var oBox1a2 = document.querySelector("#box1a2");
	var oBox1a3 = document.querySelector("#box1a3");
	var oBox1a4 = document.querySelector("#box1a4");
	var oBox1a5 = document.querySelector("#box1a5");
	
	var oBox2a1 = document.querySelector("#box2a1");
	var oBox2a2 = document.querySelector("#box2a2");
	var oBox2a3 = document.querySelector("#box2a3");
	
	var oBox3a1 = document.querySelector("#box3a1");
	var oBox3a2 = document.querySelector("#box3a2");
	var oBox3a3 = document.querySelector("#box3a3");
	
	var oBox4a1 = document.querySelector("#box4a1");
	var oBox4a2 = document.querySelector("#box4a2");
	var oBox4a3 = document.querySelector("#box4a3");
	
	var oBox5a1 = document.querySelector("#box5a1");
	var oBox5a2 = document.querySelector("#box5a2");
	
	var oBox1p1 = document.querySelector(".box1p1");
	var oBox1p2 = document.querySelector(".box1p2");
	var oBox1p3 = document.querySelector(".box1p3");
	var oBox1p4 = document.querySelector(".box1p4");
	var oBox1p5 = document.querySelector(".box1p5");
	
	var oBox2p1 = document.querySelector(".box2p1");
	var oBox2p2 = document.querySelector(".box2p2");
	var oBox2p3 = document.querySelector(".box2p3");
	
	var oBox3p1 = document.querySelector(".box3p1");
	var oBox3p2 = document.querySelector(".box3p2");
	var oBox3p3 = document.querySelector(".box3p3");
	
	var oBox4p1 = document.querySelector(".box4p1");
	var oBox4p2 = document.querySelector(".box4p2");
	var oBox4p3 = document.querySelector(".box4p3");
	
	var oBox5p1 = document.querySelector(".box5p1");
	var oBox5p2 = document.querySelector(".box5p2");
	
	var oBox6sp = document.querySelector("#box6sp");
	
	// 1
	oNavLi1.onmouseover = function(){
		oBox1.style.display = "block";
	}
	// oNavLi1.onmouseout = function(){
	// 	oBox1.style.display = "none";
	// }
	oBox1.onmouseover = function(){
		oBox1.style.display = "block";
	}
	oBox1.onmouseout = function(){
		oBox1.style.display = "none";
	}
	// 2
	oNavLi2.onmouseover = function(){
		oBox2.style.display = "block";
	}
	// oNavLi2.onmouseout = function(){
	// 	oBox2.style.display = "none";
	// }
	oBox2.onmouseover = function(){
		oBox2.style.display = "block";
	}
	oBox2.onmouseout = function(){
		oBox2.style.display = "none";
	}
	// 3
	oNavLi3.onmouseover = function(){
		oBox3.style.display = "block";
	}
	// oNavLi3.onmouseout = function(){
	// 	oBox3.style.display = "none";
	// }
	oBox3.onmouseover = function(){
		oBox3.style.display = "block";
	}
	oBox3.onmouseout = function(){
		oBox3.style.display = "none";
	}
	// 4
	oNavLi4.onmouseover = function(){
		oBox4.style.display = "block";
	}
	// oNavLi4.onmouseout = function(){
	// 	oBox4.style.display = "none";
	// }
	oBox4.onmouseover = function(){
		oBox4.style.display = "block";
	}
	oBox4.onmouseout = function(){
		oBox4.style.display = "none";
	}
	// 5
	oNavLi5.onmouseover = function(){
		oBox5.style.display = "block";
	}
	// oNavLi5.onmouseout = function(){
	// 	oBox5.style.display = "none";
	// }
	oBox5.onmouseover = function(){
		oBox5.style.display = "block";
	}
	oBox5.onmouseout = function(){
		oBox5.style.display = "none";
	}
	//购物车的滑入显示框
	oNavLi6.onmouseover = function(){
		oBox6.style.display = "block";
	}
	oBox6.onmouseover = function(){
		oBox6.style.display = "block";
	}
	oBox6.onmouseout = function(){
		oBox6.style.display = "none";
	}
	oBox6sp.onclick = function(){
		oBox6.style.display = "none";
	}
	// 二级菜单鼠标滑入添加下划线
	// 1
	oBox1a1.onmouseover = function(){
		oBox1p1.style.textDecoration = "underline";
	}
	oBox1a1.onmouseout = function(){
		oBox1p1.style.textDecoration = "none";
	}
	oBox1a2.onmouseover = function(){
		oBox1p2.style.textDecoration = "underline";
	}
	oBox1a2.onmouseout = function(){
		oBox1p2.style.textDecoration = "none";
	}
	oBox1a3.onmouseover = function(){
		oBox1p3.style.textDecoration = "underline";
	}
	oBox1a3.onmouseout = function(){
		oBox1p3.style.textDecoration = "none";
	}
	oBox1a4.onmouseover = function(){
		oBox1p4.style.textDecoration = "underline";
	}
	oBox1a4.onmouseout = function(){
		oBox1p4.style.textDecoration = "none";
	}
	oBox1a5.onmouseover = function(){
		oBox1p5.style.textDecoration = "underline";
	}
	oBox1a5.onmouseout = function(){
		oBox1p5.style.textDecoration = "none";
	}
	// 2
	oBox2a1.onmouseover = function(){
		oBox2p1.style.textDecoration = "underline";
	}
	oBox2a1.onmouseout = function(){
		oBox2p1.style.textDecoration = "none";
	}
	oBox2a2.onmouseover = function(){
		oBox2p2.style.textDecoration = "underline";
	}
	oBox2a2.onmouseout = function(){
		oBox2p2.style.textDecoration = "none";
	}
	oBox2a3.onmouseover = function(){
		oBox2p3.style.textDecoration = "underline";
	}
	oBox2a3.onmouseout = function(){
		oBox2p3.style.textDecoration = "none";
	}
	// 3
	oBox3a1.onmouseover = function(){
		oBox3p1.style.textDecoration = "underline";
	}
	oBox3a1.onmouseout = function(){
		oBox3p1.style.textDecoration = "none";
	}
	oBox3a2.onmouseover = function(){
		oBox3p2.style.textDecoration = "underline";
	}
	oBox3a2.onmouseout = function(){
		oBox3p2.style.textDecoration = "none";
	}
	oBox3a3.onmouseover = function(){
		oBox3p3.style.textDecoration = "underline";
	}
	oBox3a3.onmouseout = function(){
		oBox3p3.style.textDecoration = "none";
	}
	// 4
	oBox4a1.onmouseover = function(){
		oBox4p1.style.textDecoration = "underline";
	}
	oBox4a1.onmouseout = function(){
		oBox4p1.style.textDecoration = "none";
	}
	oBox4a2.onmouseover = function(){
		oBox4p2.style.textDecoration = "underline";
	}
	oBox4a2.onmouseout = function(){
		oBox4p2.style.textDecoration = "none";
	}
	oBox4a3.onmouseover = function(){
		oBox4p3.style.textDecoration = "underline";
	}
	oBox4a3.onmouseout = function(){
		oBox4p3.style.textDecoration = "none";
	}
	// 5
	oBox5a1.onmouseover = function(){
		oBox5p1.style.textDecoration = "underline";
	}
	oBox5a1.onmouseout = function(){
		oBox5p1.style.textDecoration = "none";
	}
	oBox5a2.onmouseover = function(){
		oBox5p2.style.textDecoration = "underline";
	}
	oBox5a2.onmouseout = function(){
		oBox5p2.style.textDecoration = "none";
	}
</script>
<script>
	// 验证码登录和密码登录的变换
	var oCenterBoxSp1 = document.querySelector(".center-boxSp1");
	var oCenterBoxSp2 = document.querySelector(".center-boxSp2");
	var oCenterBox1 = document.querySelector("#centerBox1");
	var oCenterBox2 = document.querySelector("#centerBox2");
	var oCenterFloor1 = document.querySelector(".centerFloor1");
	var oCenterFloor2 = document.querySelector(".centerFloor2");
	
	oCenterBoxSp2.onclick = function(){
		oCenterBoxSp1.style.borderBottom = "1px solid lightgray";
		oCenterBoxSp2.style.borderBottom = "1px solid black";
		oCenterBoxSp1.style.color = "#74778e";
		oCenterBoxSp2.style.color = "black";
		oCenterBox1.style.display = "none";
		oCenterFloor1.style.display = "none";
		oCenterBox2.style.display = "block";
		oCenterFloor2.style.display = "block";
	}
	oCenterBoxSp1.onclick = function(){
		oCenterBoxSp2.style.borderBottom = "1px solid lightgray";
		oCenterBoxSp1.style.borderBottom = "1px solid black";
		oCenterBoxSp2.style.color = "#74778e";
		oCenterBoxSp1.style.color = "black";
		oCenterBox2.style.display = "none";
		oCenterFloor2.style.display = "none";
		oCenterBox1.style.display = "block";
		oCenterFloor1.style.display = "block";
	}
	
	// 重置密码的显示隐藏
	var oCenter = document.querySelector(".center");
	var oFgCenter = document.querySelector(".fgCenter");
	var oCenterA1 = document.querySelector(".centerA1");
	var oCenterBox2A1 = document.querySelector(".centerBox2A1");
	
	oCenterA1.onclick = function(){
		oFgCenter.style.display = "block";
		oCenter.style.display = "none";
	}
	oCenterBox2A1.onclick = function(){
		oFgCenter.style.display = "block";
		oCenter.style.display = "none";
	}
	
	// 点击立即注册跳转到注册页面
	var oCenterA2 = document.querySelector(".centerA2");
	var oCenterBox2A2 = document.querySelector(".centerBox2A2");
	var oCenter = document.querySelector(".center");
	var oRegister = document.querySelector(".register");
	
	oCenterA2.onclick = function(){
		oCenter.style.display = "none";
		oRegister.style.display = "block";
	}
	oCenterBox2A2.onclick = function(){
		oCenter.style.display = "none";
		oRegister.style.display = "block";
	}
</script>